<template>
	<div class="main-container">
		<!-- 搜索栏 -->
		<div class="search-bar">
			<el-form :inline="true" :model="recipeQo">
				<el-form-item label="配方名">
					<el-input v-model="recipeQo.name" placeholder="输入配方名称" clearable class="search-input" />
				</el-form-item>
				<el-form-item label="原材料">
					<item-picker v-model="recipeQo.ingredient" :item-list="ingredientList" clearable filter
						placeholder="选择原材料" />
				</el-form-item>
				<el-form-item label="产物">
					<item-picker v-model="recipeQo.product" :item-list="productList" clearable filter
						placeholder="选择产物" />
				</el-form-item>
				<el-form-item label="建筑">
					<el-select v-model="recipeQo.building" multiple collapse-tags placeholder="选择建筑"
						class="building-select">
						<el-option v-for="(b, index) in buildList" :key="index" :value="b.id" :label="b.name">
							<div class="option-content">
								<my-image :icon="b.iconUrl" :size="32" type="buildings" :lazy="index >= 10"
									class="option-image" />
								<span class="option-label">{{ b.name }}</span>
							</div>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleSearch">查询</el-button>
				</el-form-item>
			</el-form>
		</div>

		<!-- 配方列表 -->
		<pagination-table search-url="/recipe/list" :searchData="recipeQo" class="recipe-table" ref="table" has-index>
			<el-table-column prop="name" label="配方名" width="180" />
			<el-table-column prop="time" label="合成时间" width="100" align="center">
				<template slot-scope="scope">
					{{ scope.row.time }}s
				</template>
			</el-table-column>

			<!-- 原料列 (内联 ItemRateShow) -->
			<el-table-column prop="ingredients" label="原料" width="360">
				<template slot-scope="scope">
					<div class="item-group">
						<div v-for="(i, index) in scope.row.ingredients" :key="index" class="item-rate-card"
							@click="gotoItem(i.id)">
							<my-image type="items" :icon="i.iconUrl" :size="40" class="item-image" />
							<div class="item-info">
								<div class="item-name">{{ i.name }}</div>
								<div class="item-rate">
									{{ (60 * i.amount / scope.row.time).toFixed(1) }}/分钟
								</div>
								<div class="item-amount">{{ i.amount }} 个</div>
							</div>
						</div>
					</div>
				</template>
			</el-table-column>

			<!-- 产物列 (内联 ItemRateShow) -->
			<el-table-column prop="products" label="产物" width="360">
				<template slot-scope="scope">
					<div class="item-group">
						<div v-for="(p, index) in scope.row.products" :key="index" class="item-rate-card"
							@click="gotoItem(p.id)">
							<my-image type="items" :icon="p.iconUrl" :size="40" class="item-image" />
							<div class="item-info">
								<div class="item-name">{{ p.name }}</div>
								<div class="item-rate">
									{{ (60 * p.amount / scope.row.time).toFixed(1) }}/分钟
								</div>
								<div class="item-amount">{{ p.amount }} 个</div>
							</div>
						</div>
					</div>
				</template>
			</el-table-column>

			<!-- 生产建筑列 -->
			<!-- 修改建筑列模板 -->
			<el-table-column prop="buildings" label="生产建筑">
				<template slot-scope="scope">
					<div class="building-group">
						<!-- 每个建筑图标外层添加容器 -->
						<div v-for="(b, index) in scope.row.buildings" :key="index" class="building-wrapper">
							<my-image class="building-image" type="buildings" :icon="b.iconUrl" :size="64" />
							{{ b.name }}
						</div>
					</div>
				</template>
			</el-table-column>
		</pagination-table>
	</div>
</template>

<script>
	import PaginationTable from '@/components/PaginationTable.vue';
	import ItemPicker from '@/components/ItemPicker.vue';
	import MyImage from "@/components/Image.vue";

	export default {
		components: {
			PaginationTable,
			ItemPicker,
			MyImage
		},
		name: "RecipePage",
		data() {
			return {
				recipeQo: {
					name: null,
					ingredient: null,
					product: null,
					building: []
				},
				ingredientList: [],
				productList: [],
				buildList: [],
			};
		},
		methods: {
			init() {
				this.$api.get('/recipe/init').then((res) => {
					this.ingredientList = res.data.ingredients;
					this.productList = res.data.products;
					this.buildList = res.data.buildings;
				});
				this.handleSearch();
			},
			handleSearch() {
				this.$refs.table.handleSearch();
			},
			gotoItem(id) {
				this.$router.push({
					path: "/item/info",
					query: {
						id
					}
				});
			}
		},
		mounted() {
			this.init();
			this.$version.addListener("recipe", this.init);
		},
		destroyed() {
			this.$version.removeListener("recipe");
		},
	};
</script>
<style lang="less" scoped>
	.main-container {
		background: #f5f6fa;
		height: 100%;
	}

	/* -------------------- 搜索栏 -------------------- */
	.search-bar {
		background: rgba(255, 255, 255, 0.98);
		backdrop-filter: blur(8px);
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
		border-bottom: 1px solid #ebeef5;
		max-width: 1400px;
		margin: 0 auto;
		padding: 16px 24px;

		.el-form {
			display: flex;
			flex-wrap: wrap;
			gap: 12px;
			justify-content: flex-start;

			.el-form-item {
				margin-bottom: 0;

				&:last-child {
					margin-left: auto;
				}
			}

			.search-input {
				width: 200px;
			}

			.building-select {
				width: 240px;
			}
		}
	}

	/* -------------------- 表格样式 -------------------- */
	.recipe-table {
		width: 98%;
		height: calc(100% - 120px);
		background: white;
		border-radius: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

		.item-group {
			display: flex;
			flex-direction: column;
			gap: 8px;
		}

		.item-rate-card {
			display: flex;
			align-items: center;
			padding: 8px;
			border-radius: 8px;
			background: white;
			cursor: pointer;
			transition: all 0.2s ease;
			border: 1px solid #ebeef5;
			margin-top: 2px;

			&:hover {
				background: white;
				border-color: #409eff;
				box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
				transform: translateY(-2px);

				.item-image {
					transform: scale(1.05);
				}
			}

			.item-image {
				flex-shrink: 0;
				border-radius: 6px;
				margin-right: 12px;
				border: 1px solid #f0f0f0;
				transition: transform 0.2s;
			}

			.item-info {
				flex: 1;

				.item-name {
					font-weight: 500;
					color: #303133;
					margin-bottom: 4px;
				}

				.item-rate {
					font-size: 12px;
					color: #606266;
				}

				.item-amount {
					font-size: 12px;
					color: #909399;
				}
			}
		}

		.building-group {
			display: flex;
			flex-wrap: wrap;
			gap: 12px;
			padding: 8px;

			.building-wrapper {
				display: flex;
				flex-direction: column;
				transition: all 0.2s;
				border-radius: 8px;
				background: white;
				padding: 6px;
				border: 1px solid #ebeef5;
				text-align: center;

				&:hover {
					transform: scale(1.1);
					box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
				}

				.building-image {
					width: 64px;
					height: 64px;
				}
			}

		}
	}

	/* -------------------- 响应式适配 -------------------- */
	@media (max-width: 768px) {
		.search-bar {
			padding: 12px;

			.el-form {
				gap: 8px;

				.el-form-item {
					width: 100%;

					.el-select {
						width: 100%;
					}
				}
			}
		}

		.recipe-table {
			width: 100%;
			margin: 12px 0;

			.building-image {
				width: 48px !important;
				height: 48px !important;
			}
		}
	}
</style>